import Echarts from 'echarts'
import { connect } from 'react-redux'
import React, { Component } from 'react'
interface IProps {
    item: any
    addVoid: any
    lists: Array<any>
}
interface IState {
    flag: boolean
}
const option = {
    series: [
        {
            name: '姓名',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: [
                {}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
export class Void extends Component<IProps, IState> {
    biao: any = null;
    state = {
        flag: true
    }
    selectOne = (bID: string, sID: number) => {
       // console.log(bID, sID);
        this.props.addVoid(bID, sID);
        setTimeout(() => {
            this.setState({
                flag: false
            })
            let str = this.props.lists.filter((item: any) => {
                return item.id == bID
            })
            const biaoDom = this.refs.biao;
            this.biao = Echarts.init(biaoDom as HTMLDivElement);
            option.series[0].data = str[0].select.map((item: any) => ({
                value: item.size,
                name: item.title
            }))
            this.biao.setOption(option)
        }, 0)
    }
    render() {
        let { item } = this.props
        return (
            <div className="i">
                <p>{item.title}</p>
                <ul className={this.state.flag ? "yes" : "no"}>
                    {item.select.map((j: any, i: number) => {
                        return <li key={i} onClick={() => {
                            this.selectOne(item.id, i)
                        }}>{j.title}{j.size}</li>
                    })}
                </ul>
                <span className={this.state.flag ? "yes" : "no"}>{item.endtime}</span>
                <div className="shan" ref="biao" style={{
                    width: '300px',
                    height: '200px',
                    marginLeft:"80px"
                }}>

                </div>
            </div>
        )
    }
}
const state = (state: any) => {
    return {
        lists: state.list
    }
}
const dispatch = (dispatch: any) => {
    return {
        addVoid(bID: string, sID: number) {
            dispatch({ type: "ADD_VOID", bID, sID })
        }
    }
}
export default connect(state, dispatch)(Void) 
